<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>微分销--秒杀页面</title>
	<link rel="icon" href="/assets/img/favicon.ico">


    <link rel="stylesheet" type="text/css" href="css/webbase.css" />
    <link rel="stylesheet" type="text/css" href="css/widget-jquery.autocomplete.css" />
    <link rel="stylesheet" type="text/css" href="css/pages-seckill-index.css" />
</head>

<body>

<h1 style="text-align: center;">秒杀商品列表</h1>
	<div class="py-container index" id="seckill">
		<!--秒杀时间-->
		<div class="sectime" v-for="(item, index) in timeMenus" :key="index">
			<div v-if="index==0"  class="item-time active">
				<div class="time-clock">{{item|dateFilter('HH:mm')}}</div>
				<div class="time-state-on">
					<span class="on-text">快抢中</span>
					<span class="on-over">距离结束：{{timeformat(remainTimes[index])}}</span>
				</div>
			</div>
			<div class="item-time" @click="findSeckillGoodsLlist(item);menuIndex=index;" v-else >
				<div class="time-clock">{{item|dateFilter('HH:mm')}}</div>
				<div class="time-state-will">
					<span>距离开始：{{timeformat(remainTimes[index])}}</span>
				</div>
			</div>
			
		</div>
		<!--商品列表-->
		<div class="goods-list">
			<ul class="seckill" id="seckill">
				<li class="seckill-item" v-for="(item, index) in goodsList" :key="index" >
					<div class="pic" onclick="location.href='seckill-item.html'">
						<img src="img/item.jpg" alt=''  >
					</div>
					<div class="intro"><span>{{item.seckillGoodsTitle}}</span></div>
					<div class='price'><b class='sec-price'>￥{{item.seckillPrice}}</b><b class='ever-price'>￥{{item.price}}</b></div>
					<div class='num'>
						<div>已售{{((item.seckillCount-item.seckillRemaining)/item.seckillCount)*100}}%</div>
						<div class='progress'>
							<div class='sui-progress progress-danger'><span :style="'width: '+((item.seckillCount-item.seckillRemaining)/item.seckillCount)+'%;'" class='bar'></span></div>
						</div>
						<div>剩余<b class='owned'>{{item.seckillRemaining}}</b>件</div>
					</div>
					<a @click.prevent="order(timeMenus[menuIndex],item.seckillId)" class='sui-btn btn-block btn-buy' href='seckill-item.html' target='_blank'>立即抢购</a>
				</li>
			</ul>
		</div>
	
	</div>

	<!-- 底部栏位 -->
	<!--页面底部，由js动态加载-->
	<div class="clearfix footer"></div>
	<script type="text/javascript">$(".footer").load("foot.html");</script>
	<!--页面底部END-->

<script src="./js/vue/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/common.js"></script>
<script src="./js/moment.min.js"></script>
<script type="text/javascript">

	Vue.filter("dateFilter", function (date, formatPattern) {
		return moment(date).format(formatPattern || "YYYY-MM-DD HH:mm:ss");
	});

	axios.defaults.timeout = 5000;   // 超时时间
	axios.defaults.baseURL = "http://localhost:8016/";  // baseURL   
	
	axios.interceptors.request.use(function(config){
		console.log(config)
		config.withCredentials= false 
		//设置jwt令牌
		config.headers.token=sessionStorage.getItem("token")
		return config;
	})
	var vm = new Vue({
		el:"#seckill",
		data:{
			timeMenus:[],
            remainTimes:[],
			goodsList:[],
			menuIndex:0, 
		},
		methods: {
			loadTimeMenu(){
				var _this = this;
				axios.get("/seckill/timeMenu").then(
					res=>{
						_this.timeMenus = res.data
						_this.findSeckillGoodsLlist(_this.timeMenus[0])	
						//统计初始时间差
						for(var i=0;i<_this.timeMenus.length;i++){
							if(i==0){
								//第1个时间   第2个开始时间-当前时间
								_this.$set(_this.remainTimes, i, new Date(_this.timeMenus[1])-new Date());
							}else{
								//第N个时间   第N个开始时间-当前时间
								_this.$set(_this.remainTimes, i, new Date(_this.timeMenus[i])-new Date());
							}
						}
                       //时间差动起来
						let timer = window.setInterval(function (args) {
							for (var i = 0; i < _this.remainTimes.length; i++) {
								//让每个都-1000
								_this.$set(_this.remainTimes, i, _this.remainTimes[i] - 1000);

								//如果当前时间差的值<0，则整体菜单标签页切换
								if(_this.remainTimes[i]<1000){
									_this.loadMenus();
								}
							}
                    	}, 1000);
					}
				)	

			},
			  //将毫秒转换成时分秒
			  timeformat: function (num) {
                var oneSecond = 1000;
                var oneMinute = oneSecond * 60;
                var oneHour = oneMinute * 60
                //小时
                var hours = Math.floor(num / oneHour);
                //分钟
                var minutes = Math.floor((num % oneHour) / oneMinute);
                //秒
                var seconds = Math.floor((num % oneMinute) / oneSecond);
                //拼接时间格式
                var str = hours + ':' + minutes + ':' + seconds;
                return str;
            },
			//秒杀列表查询
			findSeckillGoodsLlist:function (time) {
				//先转换时间
				time = moment(time).format('YYYYMMDDHH');
				//发送请求获取数据
				axios.get('/seckill/findSeckillGoodsLlist?timeStr='+time).then(function (response) {
					//将数据绑定到变量中，并页面显示
					vm.goodsList=[];
					for (let index = 0; index < response.data.length; index++) {
						vm.goodsList[index] = JSON.parse(response.data[index]);
					}
				});
			},

			//下单	
			order(time,goodsId){
						//先转换时间
						timeStr = moment(time).format('YYYYMMDDHH');
						//发送请求获取数据
						axios.get('/seckill/order?timeStr='+timeStr+"&goodsId="+goodsId).then(function (res) {
							vm.findSeckillGoodsLlist(vm.timeMenus[vm.menuIndex]);
							console.log(res.data)
						});	
			}
		},

		created(){
		     
			 this.loadTimeMenu();
		}
		
	});
</script>
</body>		
</html>